<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <h1>基础的get请求</h1>
    <form id="form" action="" method="">
        <input id="ipt" type="text">
        <button id="btn">输入学生id 查询他的详细信息</button>
    </form>
</body>

<script>
    const oForm = document.getElementById("form")
    const oIpt = document.getElementById("ipt")
    const oBtn = document.getElementById("btn")

    oForm.onsubmit = function () {
        // e.preventDefault()   //阻止默认属性

        // 1.实例化XMLHttpRequest
        const xhr = new XMLHttpRequest()


        const userId = oIpt.value

        // 2.打开路径
        // 参数1：请求方式    参数2：请求地址   参数三：是否异步
        xhr.open("get", `http://127.0.0.1:8383/user?userId=${userId}&_=`+Date.now(), true)

        // 3.发送请求
        xhr.send()

        // 4.监听事件
        xhr.onreadystatechange = function () {
            // 0.初始化xhr
            // 1.已经调用的open方法
            // 2.已经调用了send正在发送
            // 3.获取到部分数据
            // 4.获取全部数据

            // 2XX代表响应成功
            if (xhr.readyState === 4 & xhr.status >= 200 & xhr.status <= 299) {
                //此时完全成功 可以去拿响应的数据  responseText
                console.log(xhr.responseText);
            }
        }
        return false
    }
</script>

</html>